<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
	<title>正方框旋转</title>
	<style type="text/css">
		body {
			background-image: linear-gradient(135deg, #FFFE9F 0%, #FCA180 100%);
			height: 100vh;
			width: 100vw;
		}
		.container {
			width: 800px;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			margin: 100px auto;
			box-sizing: border-box;
		}
		.square-container {
			width: 100%;
			height: 100%;
		}
		.square-item {
			position: absolute;
			width: 300px;
			height: 300px;
			display: inline-block;
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0.5);
		}
		.first {
			animation: circle 10s linear infinite;
		}

		.second {
			margin-left: 90px; 
			opacity: 0.6;
			animation: circle 10s linear infinite;
		}
		.third {
			margin-left: 180px; 
			opacity: 0.2;
			animation: circle 10s linear infinite;
		}
		@keyframes circle {
			from {
				transform: rotateZ(0deg);
			}
			to {
				transform: rotateZ(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div  class="square-container">
			<span class="square-item first">第一个</span>
			<span class="square-item second">第二</span>
			<span class="square-item third">第三</span>
		</div>
	</div>
</body>
</html>